<template>
  <view class="login-container">
    <!-- 顶部波浪装饰 -->
    <view class="wave-wrapper">
      <view class="wave wave1"></view>
      <view class="wave wave2"></view>
    </view>

    <!-- 登录表单区域 -->
    <view class="login-box">
      <view class="welcome">
        <text class="title">欢迎回来</text>
        <text class="subtitle">请登录您的账号</text>
      </view>

      <view class="form-group">
        <!-- 账号输入框 -->
        <view class="input-group">
          <image src="/static/login/account.png" mode="aspectFit" class="icon"/>
          <input 
            type="text"
            v-model="formData.account"
            placeholder="请输入账号"
            class="input"
          />
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <image src="/static/login/password.png" mode="aspectFit" class="icon"/>
          <input
            :type="showPassword ? 'text' : 'password'"
            v-model="formData.password"
            placeholder="请输入密码"
            class="input"
          />
          <image 
            :src="showPassword ? '/static/login/eye-open.png' : '/static/login/eye-close.png'"
            mode="aspectFit"
            class="eye-icon"
            @tap="togglePasswordVisibility"
          />
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" @tap="handleLogin">登 录</button>

        <!-- 其他选项 -->
        <view class="options">
          <text class="option-text" @tap="goToRegister">注册账号</text>
          <text class="option-text" @tap="forgotPassword">忘记密码？</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="bottom-decoration">
      <view class="circle circle1"></view>
      <view class="circle circle2"></view>
      <view class="circle circle3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {getLoginUserUsingGet, PasswordLoginUsingPost} from '@/backend/userController';
import type Uni from '@dcloudio/uni-app';
import {delayNavigateBack} from "@/utils/navigate";
import {useLoginUserStore} from "@/store/loginUserStore";
import {tokenStore} from "@/store/tokenStore";
import type {API} from "@/backend/typings";
const loginStore = useLoginUserStore();
const tokenStoreInstance = tokenStore();
declare const uni: Uni;

const formData = ref({
  account: '',
  password: ''
});
const loginUser = ref<API.LoginUserVO>({
  userName: undefined,
  phone: undefined,
  avatarUrl: undefined,
  email: undefined,
  id: undefined,
  createTime: undefined,
  updateTime: undefined,
  openid: undefined,
  userRole: undefined
});

const showPassword = ref(false);

// 切换密码显示/隐藏
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 处理登录
const handleLogin = async () => {
  if (!formData.value.account || !formData.value.password) {
    uni.showToast({
      title: '请输入账号和密码',
      icon: 'none'
    });
    return;
  }

  try {
    const res = await PasswordLoginUsingPost({
      user: formData.value.account,
      userPassword: formData.value.password
    });

    if (res.code === 0) {
      // 保存token
      tokenStoreInstance.setToken(res.data || null);

      // 获取用户信息
      const userRes = await getLoginUserUsingGet();
      
      if (userRes.code === 0 && userRes.data) {
        // 更新用户信息
        loginUser.value = userRes.data;
        loginStore.setLoginUser(userRes.data);
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });

        // 触发用户信息更新事件
        uni.$emit('updateUserInfo');
        
        // 延迟返回，确保数据更新完成
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/profile/profile'
          });
        }, 1500);
      }
    } else {
      uni.showToast({
        title: res.message || '登录失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('登录失败：', error);
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    });
  }
};

// 去注册
const goToRegister = () => {
  uni.navigateTo({
    url: '/pages/register/register'
  });
};

// 忘记密码
const forgotPassword = () => {
  console.log('跳转到忘记密码页面');
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffffff, #f8f8f8);
  position: relative;
  overflow: hidden;
}

/* 移除原有的装饰样式 */
.decoration-top,
.decoration-bottom,
.wave-img,
.bottom-img {
  display: none;
}

/* 波浪动画效果 */
.wave-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.wave {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 43%;
  transform-origin: 50% 48%;
  animation: drift linear infinite;
}

.wave1 {
  animation-duration: 5s;
}

.wave2 {
  animation-duration: 7s;
  opacity: 0.3;
}

@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 底部装饰效果 */
.bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 240rpx;
  overflow: hidden;
  opacity: 0.1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.circle1 {
  width: 400rpx;
  height: 400rpx;
  bottom: -200rpx;
  left: -100rpx;
}

.circle2 {
  width: 300rpx;
  height: 300rpx;
  bottom: -100rpx;
  right: -50rpx;
}

.circle3 {
  width: 200rpx;
  height: 200rpx;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 调整登录框位置，避免被波浪遮挡 */
.login-box {
  position: relative;
  z-index: 1;
  margin-top: 220rpx;
  padding: 40rpx;
}

.welcome {
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

.form-group {
  margin-top: 60rpx;
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  background: rgba(248, 248, 248, 0.8);
  backdrop-filter: blur(10px);
  padding: 24rpx 32rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  padding: 10rpx;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 44rpx;
  margin-top: 60rpx;
  box-shadow: 0 8rpx 16rpx rgba(255, 87, 34, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.3s ease;
}

.login-btn:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, #ff8a00, #ff4b12);
}

.options {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
}

.option-text {
  font-size: 26rpx;
  color: #666;
  transition: color 0.3s ease;
}

.option-text:active {
  color: #ff5722;
}
</style>
